document.writeln("<!DOCTYPE html>");
document.writeln("<html lang=\'en\'>");
document.writeln("");
document.writeln("<head>");
document.writeln("    <meta charset=\'UTF-8\'>");
document.writeln("    <meta http-equiv=\'X-UA-Compatible\' content=\'IE=edge\'>");
document.writeln("    <meta name=\'viewport\' content=\'width=device-width, initial-scale=1.0\'>");
document.writeln("    <title>搜索框</title>");
document.writeln("    <style>");
document.writeln("        /*浮动布局*/");
document.writeln("        .flex {");
document.writeln("            display: flex;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*换行*/");
document.writeln("        .warp {");
document.writeln("            flex-wrap: wrap;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*每个模块均匀分布*/");
document.writeln("        .space {");
document.writeln("            justify-content: space-around;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*左右两端分开布局*/");
document.writeln("        .between {");
document.writeln("            justify-content: space-between;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*居中*/");
document.writeln("        .center {");
document.writeln("            justify-content: center;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*绝对定位*/");
document.writeln("        .absoulet {");
document.writeln("            position: absolute;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*相对定位*/");
document.writeln("        .relative {");
document.writeln("            position: relative;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*固定定位*/");
document.writeln("        .flexd {");
document.writeln("            position: fixed;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*收缩框体*/");
document.writeln("        .padding-body {");
document.writeln("            margin: 0;");
document.writeln("            top: 0;");
document.writeln("            left: 0;");
document.writeln("            /* top: 10px; */");
document.writeln("            width: 100%;");
document.writeln("        }");
document.writeln("");
document.writeln("        .flex_minddle {");
document.writeln("            justify-content: center;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*换行样式*/");
document.writeln("        .flex_wrap {");
document.writeln("            flex-wrap: wrap;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*均匀分布样式模块*/");
document.writeln("        .flex_around {");
document.writeln("            justify-content: space-around;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*左右两边分布*/");
document.writeln("        .flex_between {");
document.writeln("            justify-content: space-between;");
document.writeln("        }");
document.writeln("");
document.writeln("        .search_div2 {}");
document.writeln("");
document.writeln("        /*搜索框父级样式*/");
document.writeln("        .serach_body {");
document.writeln("            border-radius: 12px;");
document.writeln("            background-color: white;");
document.writeln("            margin: 10px;");
document.writeln("            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);");
document.writeln("            line-height: 40px;");
document.writeln("            text-align: center;");
document.writeln("        }");
document.writeln("");
document.writeln("        .search {");
document.writeln("            border: 0px white;");
document.writeln("            border: none;");
document.writeln("            /*去掉边框*/");
document.writeln("            outline: 0;");
document.writeln("            /*移除浏览器的默认聚焦样式*/");
document.writeln("            border-radius: 20px;");
document.writeln("            margin-left: 20px;");
document.writeln("            width: 400rpx;");
document.writeln("        }");
document.writeln("");
document.writeln("        .search_div1 {");
document.writeln("            border: none;");
document.writeln("            line-height: 40px;");
document.writeln("            text-align: center;");
document.writeln("        }");
document.writeln("");
document.writeln("");
document.writeln("        /*分割线*/");
document.writeln("        .line {");
document.writeln("            width: 2px;");
document.writeln("            height: 18px;");
document.writeln("            font-size: 18px;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*按钮样式*/");
document.writeln("        .searchBtn {");
document.writeln("            background: #4db46a;");
document.writeln("            width: 196px;");
document.writeln("            min-width: 118px;");
document.writeln("            height: 40px;");
document.writeln("            line-height: 60px;");
document.writeln("            margin: 10px;");
document.writeln("            font-size: 18px;");
document.writeln("            color: #fff;");
document.writeln("            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);");
document.writeln("            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);");
document.writeln("            border-radius: 12px;");
document.writeln("            cursor: pointer;");
document.writeln("            display: -webkit-box;");
document.writeln("            display: -ms-flexbox;");
document.writeln("            display: flex;");
document.writeln("            -webkit-box-align: center;");
document.writeln("            -ms-flex-align: center;");
document.writeln("            align-items: center;");
document.writeln("            -webkit-box-pack: center;");
document.writeln("            -ms-flex-pack: center;");
document.writeln("            justify-content: center;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*搜索框悬浮*/");
document.writeln("        .search_float {}");
document.writeln("");
document.writeln("        .search_float2 {");
document.writeln("            top: 0px;");
document.writeln("            z-index: 999;");
document.writeln("            position: fixed;");
document.writeln("            padding: 10px;");
document.writeln("            line-height: 60px;");
document.writeln("            display: flex;");
document.writeln("            width: 100%;");
document.writeln("            background-color: #e0eaf2;");
document.writeln("            -webkit-animation: SlideDown .3s ease-in-out;");
document.writeln("            animation: SlideDown .3s ease-in-out;");
document.writeln("            -webkit-transition: background-color .4s ease-in-out;");
document.writeln("            transition: background-color .4s ease-in-out;");
document.writeln("        }");
document.writeln("");
document.writeln("        .selectCity {");
document.writeln("            width: 440px;");
document.writeln("            /* height: 120px; */");
document.writeln("            top: 267px;");
document.writeln("            z-index: 999;");
document.writeln("            position: absolute;");
document.writeln("            font-weight: 400;");
document.writeln("            font-size: 14px;");
document.writeln("            color: #2dbb55;");
document.writeln("            background-color: white;");
document.writeln("            border-radius: 10px;");
document.writeln("            padding: 10px 20px;");
document.writeln("            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);");
document.writeln("        }");
document.writeln("");
document.writeln("        /*三角形*/");
document.writeln("        .single {");
document.writeln("            width: 0px;");
document.writeln("            height: 0px;");
document.writeln("            border: 10px solid #000;");
document.writeln("            border-top-color: transparent;");
document.writeln("            border-bottom-color: white;");
document.writeln("            border-left-color: transparent;");
document.writeln("            border-right-color: transparent;");
document.writeln("            position: absolute;");
document.writeln("            top: -16px;");
document.writeln("            left: 20px;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*城市*/");
document.writeln("        .city>#city_arr {");
document.writeln("            list-style: none;");
document.writeln("        }");
document.writeln("");
document.writeln("");
document.writeln("        #city_arr>ul {");
document.writeln("            list-style: none;");
document.writeln("            display: flex;");
document.writeln("            justify-content: space-around;");
document.writeln("        }");
document.writeln("");
document.writeln("        .cloor_green {");
document.writeln("            color: #2dbb55;");
document.writeln("        }");
document.writeln("");
document.writeln("        #city_arr>ul>li>a {");
document.writeln("            color: black;");
document.writeln("        }");
document.writeln("");
document.writeln("");
document.writeln("        #city_arr>ul>li>a:hover {");
document.writeln("            color: #60ca6e;");
document.writeln("        }");
document.writeln("");
document.writeln("        /*区域*/");
document.writeln("        #localArea {");
document.writeln("            display: flex;");
document.writeln("            /* justify-content: space-around; */");
document.writeln("        }");
document.writeln("");
document.writeln("        #localArea>ul {");
document.writeln("            list-style: none;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-top {");
document.writeln("            margin-top: 10px;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-top2 {");
document.writeln("            margin-top: 16px;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-left {");
document.writeln("            margin-left: 10%;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-left2 {");
document.writeln("            margin-left: 50px;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-left1 {");
document.writeln("            margin-left: 20px;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-left_logo {");
document.writeln("            margin-left: 10%;");
document.writeln("        }");
document.writeln("");
document.writeln("        .margin-left_select {");
document.writeln("            margin-left: 7px;");
document.writeln("        }");
document.writeln("    </style>");
document.writeln("</head>");
document.writeln("");
document.writeln("<body>");
document.writeln("    <div id=\'app\'>");
document.writeln("        <!--搜索框2-->");
document.writeln("        <div class=\'search_key2\'>");
document.writeln("            <div class=\'center padding-body search_float2\'>");
document.writeln("                <div class=\'flex\'>");
document.writeln("                    <div class=\'serach_body flex\'>");
document.writeln("                        <div class=\'search_div1 flex\' @click=\'closeCity2\'>");
document.writeln("                            <div style=\'width: 15px;height:18px;margin-left: 20px;margin-top: 2px;margin-right: -16px;\'>");
document.writeln("                                <img src=\'../../img/logo/address.png\' style=\'width: 15px;height:18px;margin-top: 10px;\'>");
document.writeln("                            </div>");
document.writeln("                            <input type=\'text\' class=\'search\' placeholder=\'请选择城市\' v-model=\'city\'>");
document.writeln("                            <div v-if=\'isShowFormXF\' class=\'selectCity\' style=\'top:70px\'>");
document.writeln("                                <div class=\'single\'></div>");
document.writeln("                                <div class=\'flex_wrap\'>");
document.writeln("                                    <div class=\'flex margin-left_select\'>");
document.writeln("                                        江苏省");
document.writeln("                                    </div>");
document.writeln("");
document.writeln("                                    <div class=\'city flex flex_around margin-left_select\'>");
document.writeln("                                        <div v-for=\'(item,i) in cityArr\' id=\'city_arr\'>");
document.writeln("                                            <div class=\'flex_wrap\'>");
document.writeln("                                                <!--城市-->");
document.writeln("                                                <div id=\'city_arr\'>");
document.writeln("                                                    <ul>");
document.writeln("                                                        <li>");
document.writeln("                                                            <a href=\'javascript:void(0)\'");
document.writeln("                                                                @click=\'selectCity($event)\'>{{item.cityName}}</a>");
document.writeln("                                                        </li>");
document.writeln("                                                    </ul>");
document.writeln("                                                </div>");
document.writeln("");
document.writeln("                                            </div>");
document.writeln("                                        </div>");
document.writeln("                                    </div>");
document.writeln("                                </div>");
document.writeln("                            </div>");
document.writeln("                        </div>");
document.writeln("");
document.writeln("                        <div class=\'search_div2 flex\'>");
document.writeln("                            <div class=\'block\'>");
document.writeln("                                <el-date-picker");
document.writeln("                                    style=\'border-top: none;border-bottom: none;border-radius: 0;margin-bottom: 2px;\'");
document.writeln("                                    v-model=\'date\' type=\'daterange\' range-separator=\'至\' start-placeholder=\'入住日期\'");
document.writeln("                                    end-placeholder=\'退房日期\'>");
document.writeln("                                </el-date-picker>");
document.writeln("                            </div>");
document.writeln("                        </div>");
document.writeln("");
document.writeln("                        <div class=\'search_div1 flex\'>");
document.writeln("                            <div style=\'width: 18px;height:16px;margin-left: 20px;margin-top: 2px;margin-right: -16px;\'>");
document.writeln("                                <img src=\'../../img/logo/search.png\' style=\'width: 18px;height:16px;margin-top: 10px;\'>");
document.writeln("                            </div>");
document.writeln("                            <input type=\'text\' class=\'search\' placeholder=\'关键字搜索\'>");
document.writeln("                        </div>");
document.writeln("                    </div>");
document.writeln("                    <div class=\'\' @click=\'searchBtn\'>");
document.writeln("                        <div class=\'searchBtn\' role=\'button\'><i class=\'el-icon-search\'></i>搜索酒店</div>");
document.writeln("                    </div>");
document.writeln("                </div>");
document.writeln("            </div>");
document.writeln("        </div>");
document.writeln("    </div>");
document.writeln("    <!--引用vue-->");
document.writeln("    <script src=\'../../js/untils/vue.js\'></script>");
document.writeln("    <!-- 引入样式 -->");
document.writeln("    <link rel=\'stylesheet\' href=\'https://unpkg.com/element-ui/lib/theme-chalk/index.css\'>");
document.writeln("    <!-- 引入组件库 -->");
document.writeln("    <script src=\'https://unpkg.com/element-ui/lib/index.js\'></script>");
document.writeln("    <script>");
document.writeln("        new Vue({");
document.writeln("            el: \'#app\',");
document.writeln("            data() {");
document.writeln("                return {");
document.writeln("                    // 城市数组");
document.writeln("                    cityArr: [{");
document.writeln("                            cityid: 1,");
document.writeln("                            cityName: \'南京\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 2,");
document.writeln("                            cityName: \'苏州\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 3,");
document.writeln("                            cityName: \'无锡\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 4,");
document.writeln("                            cityName: \'南通\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 5,");
document.writeln("                            cityName: \'常州\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 6,");
document.writeln("                            cityName: \'泰州\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 7,");
document.writeln("                            cityName: \'扬州\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 8,");
document.writeln("                            cityName: \'徐州\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 9,");
document.writeln("                            cityName: \'盐城\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 10,");
document.writeln("                            cityName: \'镇江\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 11,");
document.writeln("                            cityName: \'淮安\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 12,");
document.writeln("                            cityName: \'连云港\',");
document.writeln("                        },");
document.writeln("                        {");
document.writeln("                            cityid: 13,");
document.writeln("                            cityName: \'宿迁\',");
document.writeln("                        }");
document.writeln("                    ],");
document.writeln("                    date: \'\', // 日期");
document.writeln("                    monitor: 0, // 页面滚动的高度(监听器)");
document.writeln("                    city: \'\', // 搜索框选择的城市");
document.writeln("                    isShowForm: false, // 是否展示城市选择框");
document.writeln("                    isShowFormXF: false, // 悬浮框的城市选择框");
document.writeln("                }");
document.writeln("            },");
document.writeln("");
document.writeln("            methods: {");
document.writeln("                // 是否关闭城市选项");
document.writeln("                closeCity() {");
document.writeln("                    if (this.isShowForm) {");
document.writeln("                        this.isShowForm = false;");
document.writeln("                        this.monitor = window.pageYOffset;");
document.writeln("                        console.log(this.monitor)");
document.writeln("                    } else {");
document.writeln("                        this.isShowForm = true;");
document.writeln("                    }");
document.writeln("                },");
document.writeln("");
document.writeln("                // 是否关闭悬浮搜选框城市选项");
document.writeln("                closeCity2() {");
document.writeln("                    if (this.isShowFormXF) this.isShowFormXF = false;");
document.writeln("                    else this.isShowFormXF = true;");
document.writeln("                },");
document.writeln("");
document.writeln("                // 选择城市");
document.writeln("                selectCity(e) {");
document.writeln("                    this.city = e.currentTarget.innerHTML");
document.writeln("                    // console.log(e.currentTarget.innerHTML )");
document.writeln("                },");
document.writeln("");
document.writeln("            }");
document.writeln("        })");
document.writeln("    </script>");
document.writeln("</body>");
document.writeln("<!--顶部导航栏展示-->");
document.writeln("<script type=\'text/javascript\'>");
document.writeln("    $(function () {");
document.writeln("        $(\'.search_key2\').hide();");
document.writeln("        $(window).scroll(function () {");
document.writeln("            if ($(document).scrollTop() >= 230) {");
document.writeln("                $(\'.search_key2\').addClass(\'.search_key2\').slideDown(); // 展示");
document.writeln("            } else {");
document.writeln("                $(\'.search_key2\').hide(); // 隐藏");
document.writeln("            }");
document.writeln("        })");
document.writeln("    })");
document.writeln("</script>");
document.writeln("");
document.writeln("</html>");